<template>
    <div class="wrapper">
        <div class="main">
            <div class="band-ctt">
                <div :style="{height: scrollHeight + 'px'}">
                    <div v-for="(band, idx) in bands" @click="bandClick(band)" :class="['band-item',selectedBand == band?'active':'']"
                         :style="{height: itemHeight + 'px'}">
                        <text class="band-name">Band {{band}}</text>
                        <text v-if="selectedBand == band" class="icon-right"> > </text>
                    </div>
                </div>
            </div>
            <div class="main-ctt" :style="{height: scrollHeight + 'px'}">
                <text class="label">频段：Band {{selectedBand}}</text>
                <input class="input" type="number" v-model="value" placeholder="实际频点值"/>
                <text class="alert information">范围：（{{role.low}} - {{role.high}}） OFF:{{role.off}}</text>
                <text v-if="showAlert" class="alert danger">输入数值必须在范围之内：（{{role.low}} - {{role.high}}）</text>
                <div class="result-ctt">
                    <text class="result-title">ARFCN</text>
                    <text class="result-body">{{result}}</text>
                </div>
            </div>
        </div>
        <div class="touch-bar" :style="{'height': touchBarHeight}"></div>
    </div>
</template>

<script>
    const standard = {
        1: {
            down: {
                low: 2110,
                high: 2170,
                off: 0
            }
        },
        2: {
            down: {
                low: 1930,
                high: 1990,
                off: 600
            }
        },
        3: {
            down: {
                low: 1805,
                high: 1880,
                off: 1200
            }
        },
        4: {
            down: {
                low: 2110,
                high: 2155,
                off: 1950
            }
        },
        5: {
            down: {
                low: 869,
                high: 894,
                off: 2400
            }
        },
        6: {
            down: {
                low: 875,
                high: 885,
                off: 2650
            }
        },
        7: {
            down: {
                low: 2620,
                high: 2690,
                off: 2750
            }
        },
        8: {
            down: {
                low: 925,
                high: 960,
                off: 3450
            }
        },
        9: {
            down: {
                low: 1844.9,
                high: 1879.9,
                off: 3800
            }
        },
        10: {
            down: {
                low: 2110,
                high: 2170,
                off: 4150
            }
        },
        11: {
            down: {
                low: 1475.9,
                high: 1495.0,
                off: 4750
            }
        },
        12: {
            down: {
                low: 729,
                high: 746,
                off: 5010
            }
        },
        13: {
            down: {
                low: 746,
                high: 756,
                off: 5180
            }
        },
        14: {
            down: {
                low: 758,
                high: 768,
                off: 5280
            }
        },
        17: {
            down: {
                low: 734,
                high: 746,
                off: 5730
            }
        },
        18: {
            down: {
                low: 860,
                high: 875,
                off: 5850
            }
        },
        19: {
            down: {
                low: 875,
                high: 890,
                off: 6000
            }
        },
        20: {
            down: {
                low: 791,
                high: 821,
                off: 6450
            }
        },
        21: {
            down: {
                low: 1495.9,
                high: 1510.9,
                off: 6450
            }
        }
    };
    export default {
        data() {
            return {
                bands: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 17, 18, 19, 20, 21],
                role: {
                    low: 0,
                    high: 0,
                    off: 0
                },
                selectedBand: 0,
                showAlert: false,
                value: '',

                curHomeBackTriggerTimes: 1,
                maxHomeBackTriggerTimes: 2,
                statusBarHeight: weex.config.eros.statusBarHeight ? weex.config.eros.statusBarHeight : 40,
                touchBarHeight: weex.config.eros.touchBarHeight ? weex.config.eros.touchBarHeight : 20
                // statusBarHeight: 40,
                // touchBarHeight: 20
            }
        },
        created() {
            let self = this;
            // this.$storage
            self.$storage.get('band.select').then(resData => {
                console.log(`获取选择的Band：${resData}`);
                if (resData) {
                    self.bandClick(resData);
                } else {
                    self.bandClick(1);
                }
            });
            this.androidFinishApp();
        },
        computed: {
            result() {
                this.showAlert = false;
                if (!this.value || (this.value + '').length < 3) {
                    return '';
                }
                if (this.value < this.role.low || this.value > this.role.high) {
                    this.showAlert = true;
                    return '';
                }
                return ((this.value * 100 - this.role.low * 100) + this.role.off * 10) / 10;
            },
            itemHeight() {
                return this.scrollHeight / this.bands.length;
            },
            scrollHeight() {
                let sh = weex.config.eros.deviceHeight - this.statusBarHeight - this.touchBarHeight;
                return this.realPx(sh) - 80;
            }
        },
        methods: {
            bandClick(band) {
                let selected = standard[band];
                this.selectedBand = band;
                this.role = selected.down;
                this.$storage.set('band.select', band).then(resData => {
                    console.log(`保存选择的band: ${resData}`);
                })
            },
            androidFinishApp() {
                const globalEvent = weex.requireModule('globalEvent');
                globalEvent.addEventListener('homeBack', options => {
                    if (this.curHomeBackTriggerTimes === this.maxHomeBackTriggerTimes) {
                        this.$router.finish();
                    } else {
                        this.curHomeBackTriggerTimes++;
                        this.$notice.toast({message: `再点一次应用将关闭`})
                    }
                })
            },
            realPx(val){
                return val * 750 / weex.config.eros.deviceWidth;
            }
        }
    }
</script>

<style scoped>
    .status-bar {
        width: 750px;
        height: 40px;
        background-color: #1da1f2;
    }
    .touch-bar {
        height: 68px;
        width: 750px;
        background-color: #1da1f2;
    }
    .main{
        flex-direction: row;
        align-items: stretch;
    }
    .band-ctt{
        width: 200px;
        background-color: #1da1f2;
        flex-direction: column;
    }
    .main-ctt{
        width: 550px;
        background-color: #6f5499;
        flex-direction: column;
        padding: 20px;
    }
    .band-item{
        align-items: flex-start;
        padding-left: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .band-name{
        color: #ffffff;
        font-size: 32px;
    }
    .active{
        color: #ffffff;
        background-color: #6f5499;
    }
    .icon-right{
        position: absolute;
        right: 20px;
        top: 13px;
        color: #ffffff;
    }
    .label{
        margin-bottom: 20px;
        font-weight: bold;
        font-size: 28px;
        color: #ffffff;
    }
    .input{
        border-color: #cccccc;
        border-style: solid;
        border-width: 1px;
        padding: 20px;
        font-size: 90px;
        color: #555555;
        background-color: #ffffff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .alert{
        border-style: solid;
        border-width: 1px;
        padding: 20px;
        font-size: 28px;
    }

    .danger {
        background-color: #f2dede;
        border-color: #ebccd1;
        color: #a94442;
        border-radius: 10px;
    }
    .information{
        color: #31708f;
        background-color: #d9edf7;
        border-color: #bce8f1;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .result-ctt {
        margin-top: 40px;
        margin-bottom: 20px;
        background-color: #ffffff;
        border-width: 1px;
        border-style: solid;
        border-color: #d6e9c6;
        border-radius: 4px;
    }
    .result-title{
        font-size: 40px;
        color: #3c763d;
        background-color: #dff0d8;
        border-color: #d6e9c6;
        padding: 20px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    .result-body{
        font-size: 120px;
        color: #FF6600;
        padding: 70px;
        height: 260px;
        text-align: center;
    }
</style>
